<template>
  <view class="step-wrap">
    <view
      class="step-item"
      :key="index"
      v-for="(item, index) in stepData"
      @click.stop="handleClickItem(item, index)"
    >
      <view class="left">
        <view
          class="up-line"
          :class="[handleUpLineClass(item, index)]"
          v-if="index != stepData.length + 1"
        ></view>
        <view class="circle" :class="[handleCircleClass(item, index)]"> </view>
        <view
          class="down-line"
          :class="[handleDownClass(item, index)]"
          v-if="index != stepData.length - 1"
        ></view>
      </view>
      <view class="right">
        <!-- 左侧文字和详情 -->
        <block>
          <view class="content">
            <view class="title" :class="[handleNameClass(item, index)]">
              {{ item.rightName }}
              <template v-if="!isLogin">
                <view v-if="item.isFree == 1" class="free-logo">免费 </view>
                <view v-else-if="item.isFree == 2" class="free-logo"
                  >含免费
                </view>
              </template>
              <!-- <view
                v-if="item.isFree && !isLogin && item.finishType == 2"
                class="green-right"
              ></view> -->
            </view>
            <view class="detail" v-if="item.rightId == 4">
              <view class="text">最近完成的人</view>
              <view class="img-list">
                <image
                  v-for="img in defaultImgList"
                  :src="img"
                  :key="img"
                  class="avatar"
                ></image>
              </view>
            </view>
          </view>
        </block>

        <!-- 右侧文字或按钮 -->
        <block>
          <!-- 将要去完成是个按钮 -->
          <view class="begin-btn" v-if="handleBtn(item, index)">
            <text class="text">{{ getBtnName(item) }}</text>
            <image class="white-arrow" :src="whiteArrow"></image>
          </view>
          <!-- 完成后或者前一个即将要去完成那么是文字 -->
          <view class="finish-text" v-else>
            <text class="text">{{ getBtnName(item) }}</text>
            <image
              class="go"
              :src="orangeGo"
              v-if="getBtnName(item) != '未解答'"
            ></image>
          </view>
        </block>
      </view>
    </view>
  </view>
</template>

<script>
import { ztBurryPoint } from '@/api/modules/career';
import common from '@/api/common.js';

export default {
  name: 'ElanSteps',
  props: {
    projectName: {
      type: String,
      default: ''
    },
    isLogin: {
      type: Boolean,
      default: false
    },
    imgList: {
      type: Array,
      default: () => []
    },
    stepData: {
      type: Array,
      default: () => {
        return [];
      }
    },
    rightsList: {
      type: Array,
      default: () => {
        return [];
      }
    },
    info: {
      type: Object,
      default: () => {
        return {};
      }
    },
    sort: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      orangeGo: this.$imgBase + 'careerPath/orangeGo.png',
      whiteArrow: this.$imgBase + 'careerPath/whiteArrow.png',
      defaultImgList: [
        this.$imgBase + 'careerPath/realPicOne.png',
        this.$imgBase + 'careerPath/realPicTwo.png',
        this.$imgBase + 'careerPath/realPicThree.png'
      ],

      personId: uni.getStorageSync('person-id').slice(2) || undefined,
      assessmentVersion: uni.getStorageSync('assessmentVersion'),
      discLeftUseNum: 0
    };
  },
  watch: {
    imgList: {
      handler(val) {
        if (val.length) {
          this.defaultImgList = val;
        }
      }
    }
  },
  methods: {
    showItme(item) {
      // console.log("item", item);
    },
    reqZtBurryPoint(rightItem) {
      // console.log("item", rightItem);
      const params = {
        rightId: rightItem.rightId,
        cardType: this.info.cardType,
        personId: this.personId,
        description: `${this.personId}点击了${rightItem.rightName}`
      };
      ztBurryPoint(params)
        .then((res) => {
          if (res.code == 200) {
            // console.log(`${this.personId}点击了11${rightItem.rightName}`);
            // if (
            //   rightItem.rightName == "顾问服务简历解析报告" &&
            //   rightItem.rightStatus == 4 &&
            //   rightItem.rightId == 15
            // ) {
            //   // console.log("rightItem", rightItem);
            //   // console.log("123", this.projectName);
            //   // rightStatus==4 和 rightId==15的情况才显示去购买
            //   // 这里如果显示了去购买的情况点击了顾问简历诊断解析就跳转到购买营销页
            //   switch (this.projectName) {
            //     // 判断是哪个项目
            //     case "CONSULTE_SERVICE":
            //       uni.navigateTo({
            //         url: `/pagesSub/userCenter/careerPathV2/components/BuyPage`,
            //       });
            //       break;
            //     case "ZHITU_WUHAN_SERVICE":
            //       uni.navigateTo({
            //         url: `/pagesSub/userCenter/careerPathV2/components/WuHanBuyPage`,
            //       });
            //       break;
            //     case "ZHITU_TOC_SERVICE":
            //       uni.navigateTo({
            //         url: `/pagesSub/userCenter/careerPathV2/components/CBuyPage`,
            //       });
            //       break;
            //     default:
            //       break;
            //   }
            // }
            if (rightItem.rightName == 'AI面评') {
              console.log('this.projectName', this.projectName);
              if (rightItem.rightStatus == 4) {
                if (this.projectName == 'ZHITU_TOC_SERVICE') {
                  const queryParams = {
                    userNum: rightItem.userNum || 0,
                    rightCount: rightItem.rightCount || 3
                  };
                  const queryString = common.serializeQueryParams(queryParams);

                  uni.navigateTo({
                    url: `/pagesSub/companyCenter/interviewAI/majorSearchAI${queryString}`
                  });
                } else {
                  uni.navigateTo({
                    url: `/pagesSub/careerNew/zhituPaytoC/index?rightId=17&cardType=${this.info.cardType}`
                  });
                }

                // switch (this.projectName) {
                //   // 判断是哪个项目
                //   case "CONSULTE_SERVICE":
                //     uni.navigateTo({
                //       url: `/pagesSub/userCenter/careerPathV2/components/BuyPage`,
                //     });
                //     break;
                //   case "ZHITU_WUHAN_SERVICE":
                //     uni.navigateTo({
                //       url: `/pagesSub/userCenter/careerPathV2/components/WuHanBuyPage`,
                //     });
                //     break;
                //   default:
                //     break;
                // }
              } else {
                // console.log("rightItem", rightItem);
                const queryParams = {
                  userNum: rightItem.userNum || 0,
                  rightCount: rightItem.rightCount || 3
                };
                const queryString = common.serializeQueryParams(queryParams);

                uni.navigateTo({
                  url: `/pagesSub/companyCenter/interviewAI/majorSearchAI${queryString}`
                });
              }
            }
            if (rightItem.rightName == '谈薪技巧/offer选择标准指南') {
              if (rightItem.rightStatus == 4) {
                switch (this.projectName) {
                  // 判断是哪个项目
                  case 'CONSULTE_SERVICE':
                    uni.navigateTo({
                      url: `/pagesSub/userCenter/careerPathV2/components/BuyPage`
                    });
                    break;
                  case 'ZHITU_WUHAN_SERVICE':
                    uni.navigateTo({
                      url: `/pagesSub/userCenter/careerPathV2/components/WuHanBuyPage`
                    });
                    break;
                  case 'ZHITU_TOC_SERVICE':
                    uni.navigateTo({
                      url: `/pagesSub/userCenter/careerPathV2/components/CBuyPage`
                    });
                    break;
                  default:
                    break;
                }
              } else if (rightItem.rightStatus == 2) {
                uni.downloadFile({
                  url: rightItem.extra.fileUrl, // 文件的本身url
                  filePath:
                    wx.env.USER_DATA_PATH + '/' + rightItem.rightName + '.pdf', // 本地自定义的文件名
                  success: function (res) {
                    let filePath = res.filePath;
                    uni.openDocument({
                      filePath: filePath,
                      success: function () {
                        console.log('成功');
                      },
                      fail: function (err) {
                        console.log('失败');
                      }
                    });
                    uni.hideLoading();
                  },
                  fail: function (res) {
                    uni.hideLoading();
                    uni.showToast({
                      icon: 'none',
                      title: '链接已经过期！',
                      duration: 1000
                    });
                  },
                  complete: (res) => {
                    console.log('complete', res);
                  }
                });
                // uni.navigateTo({
                //   url: rightItem.extra.fileUrl,
                // });
              }
            }
          }
        })
        .catch((e) => {
          console.log(e);
        });
    },
    handleBtn(item, index) {
      const rightStatus = item.rightStatus;
      // 当上一大项目是完成的状态的时候
      if (this.rightsList[this.sort - 1].finishType == 2) {
        if (index == 0) {
          if (rightStatus == 1) {
            return true;
          } else {
            return false;
          }
        } else {
          if (
            (this.stepData[index - 1].rightStatus == 2 ||
              this.stepData[index - 1].rightStatus == 3) &&
            (rightStatus == 1 || rightStatus == 0)
          ) {
            return true;
          } else {
            return false;
          }
        }
      } else {
        return false;
      }
    },
    handleUpLineClass(item, index) {
      const rightStatus = item.rightStatus;
      if (index == 0) return '';
      // 上一个已经完成，而且当前是即将要做的，upLine需高亮
      if (
        (this.stepData[index - 1].rightStatus == 2 ||
          this.stepData[index - 1].rightStatus == 3) &&
        rightStatus == 1
      ) {
        return 'hasDoneLine';
      } else {
        return 'futureLine';
      }
    },
    handleDownClass(item, index) {
      const rightStatus = item.rightStatus;
      // 当前是第一个，而且是即将要做，无需高亮
      if (index == 0) {
        if (rightStatus == 1) {
          return 'futureLine';
        } else if (rightStatus == 2 || rightStatus == 3) {
          return 'hasDoneLine';
        }
      } else {
        // 如果不是第一个
        if (
          (this.stepData[index - 1].rightStatus == 2 ||
            this.stepData[index - 1].rightStatus == 3) &&
          rightStatus == 1
        ) {
          return '';
        }
      }
    },
    handleCircleClass(item, index) {
      const rightStatus = item.rightStatus;
      // 如果是第一个，根据状态返回
      if (index == 0) {
        // 如果当前的状态是1而且是第一个，说明即将要进行
        if (rightStatus == 1) {
          return ['goingTodoBg'];
        }
        // 如果当前的状态是2或者3，说明已经完成
        if (rightStatus == 2 || rightStatus == 3) {
          return ['hasDoneBg'];
        }
        if (rightStatus == 4) {
          return ['futureTodoBg'];
        }
      } else {
        // 如果是不是第一个
        // 如果当前的状态是2或者3，说明已经完成
        if (rightStatus == 2 || rightStatus == 3) {
          return ['hasDoneBg'];
        }
        // 如果当前的状态是1而且上一个状态是2或者3，说明即将要进行
        if (
          (this.stepData[index - 1].rightStatus == 2 ||
            this.stepData[index - 1].rightStatus == 3) &&
          rightStatus == 1
        ) {
          return ['goingTodoBg'];
        }
        // 如果上一个状态是1，说明当前的状态是未来要完成的
        if (this.stepData[index - 1].rightStatus == 1 && rightStatus == 1) {
          return ['futureTodoBg'];
        }
        if (rightStatus == 4) {
          return ['futureTodoBg'];
        }
      }
    },
    handleNameClass(item, index) {
      const rightStatus = item.rightStatus;
      // 如果是第一个，根据状态返回
      if (index == 0) {
        // 如果当前的状态是1而且是第一个，说明即将要进行
        if (rightStatus == 1) {
          return ['goingTodo'];
        }
        // 如果当前的状态是2或者3，说明已经完成
        if (rightStatus == 2 || rightStatus == 3) {
          return ['hasDone'];
        }
      } else {
        // 如果不是第一个
        // 如果当前的状态是2或者3，说明已经完成
        if (rightStatus == 2 || rightStatus == 3) {
          return ['hasDone'];
        }
        // 如果当前的状态是1而且上一个状态是2或者3，说明即将要进行
        if (
          (this.stepData[index - 1].rightStatus == 2 ||
            this.stepData[index - 1].rightStatus == 3) &&
          rightStatus == 1
        ) {
          return ['goingTodo'];
        }
        // 如果上一个状态是1，说明当前的状态是未来要完成的
        if (this.stepData[index - 1].rightStatus == 1 && rightStatus == 1) {
          return ['futureTodo'];
        }
      }
    },
    async handleClickItem(item, index) {
      // 请先完成上一步再进行下一步
      // if (index > 0 && this.stepData[index - 1].rightStatus == 1) {
      //   uni.showToast({ icon: "none", title: "请先完成上一个步骤！" });
      //   return;
      // }
      console.log('item22223333', item);
      if (item.rightStatus == 3) {
        uni.showToast({
          icon: 'none',
          title: '您的职途卡已过期！',
          duration: 1000
        });
        return;
      }
      this.reqZtBurryPoint(item);
      // 完善简历
      if (item.rightId == 3) {
        // 有没有使用过都是跳到完善建立页面
        uni.navigateTo({
          url: '/pagesSub/newResume/index'
        });
      }
      //简历诊断
      if (item.rightId == 4) {
        // const isOld =
        //   item.extra &&
        //   item.extra.hasOwnProperty('diagnoseRecordId') &&
        //   Object.keys(item.extra).length == 1;
        //未使用，跳到诊断页面

        // 目前已经全部跳到新的简历诊断首页，所以这里注释掉

        if (item.rightStatus == 1) {
          // 因为简历诊断中的能力诊断和rightStatus没有关联
          // 如果有 capacityId 这个参数，证明已经做过能力诊断，跳到结果页面
          if (item.extra && item.extra.capacityId) {
            uni.navigateTo({
              url: `/pagesSub/newResume/resumeAssessment/index?target=AIResumeDiagnoseNew`
            });
          } else {
            const diagnosisParams = uni.getStorageSync('diagnosisParams')
              ? JSON.parse(uni.getStorageSync('diagnosisParams'))
              : {};
            // 本地有数据，证明已经选择过专业和职业，就跳到简历诊断结果页
            if (Object.keys(diagnosisParams).length >= 0) {
              uni.navigateTo({
                url: `/pagesSub/newResume/resumeAssessment/index?target=AIResumeDiagnoseNew`
              });
            } else {
              // 如果没有，就跳到新的简历诊断首页
              uni.navigateTo({
                url: '/pagesSub/AIResumeDiagnoseNew/index'
              });
            }
          }
          // extra只有1个key，且 这个key == diagnoseRecordId,就跳去老页面
          // if (isOld) {
          //   // fromWhere是用于区分从发现进去和从职途进去，从发现进去要付费，职途不用付费
          //   uni.navigateTo({
          //     url: '/pagesSub/career/activity/ResumeDiagnosis?fromWhere=careerPath'
          //   });
          // } else {
          //   // 因为简历诊断中的能力诊断和rightStatus没有关联
          //   // 如果有 capacityId 这个参数，证明已经做过能力诊断，跳到结果页面
          //   if (item.extra && item.extra.capacityId) {
          //     uni.navigateTo({
          //       url: `/pagesSub/newResume/resumeAssessment/index?target=AIResumeDiagnoseNew`
          //     });
          //   } else {
          //     const diagnosisParams = uni.getStorageSync('diagnosisParams')
          //       ? JSON.parse(uni.getStorageSync('diagnosisParams'))
          //       : {};
          //     // 本地有数据，证明已经选择过专业和职业，就跳到简历诊断结果页
          //     if (Object.keys(diagnosisParams).length >= 0) {
          //       uni.navigateTo({
          //         url: `/pagesSub/newResume/resumeAssessment/index?target=AIResumeDiagnoseNew`
          //       });
          //     } else {
          //       // 如果没有，就跳到新的简历诊断首页
          //       uni.navigateTo({
          //         url: '/pagesSub/AIResumeDiagnoseNew/index'
          //       });
          //     }
          //   }
          // }
        } else if (item.rightStatus == 2) {
          // 如果有 capacityId 这个参数，证明已经做过能力诊断，跳到结果页面
          if (item.extra && item.extra.capacityId) {
            uni.navigateTo({
              url: `/pagesSub/newResume/resumeAssessment/index?target=AIResumeDiagnoseNew`
            });
          } else {
            // 如果没有，就跳到新的简历诊断首页
            uni.navigateTo({
              url: '/pagesSub/AIResumeDiagnoseNew/index'
            });
          }
        } else if (item.rightStatus == 4) {
          // 要去c端购买才能用
          uni.navigateTo({
            url: `/pagesSub/careerNew/zhituPaytoC/index?rightId=${
              item.rightId
            }&cardType=${this.info.cardType || '-1'}`
          });
        }
      }
      //顾问简历诊断解析
      if (item.rightId == 15) {
        if (item.rightStatus == 4) {
          console.log('this.projectName', this.projectName);
          switch (this.projectName) {
            // 判断是哪个项目
            case 'CONSULTE_SERVICE':
              uni.navigateTo({
                url: `/pagesSub/userCenter/careerPathV2/components/BuyPage`
              });
              break;
            case 'ZHITU_WUHAN_SERVICE':
              uni.navigateTo({
                url: `/pagesSub/userCenter/careerPathV2/components/WuHanBuyPage`
              });
              break;
            case 'ZHITU_TOC_SERVICE':
              uni.navigateTo({
                url: `/pagesSub/userCenter/careerPathV2/components/CBuyPage`
              });
              break;
            default:
              break;
          }
        } else {
          if (item.extra && item.extra.fileUrl) {
            this.openReport(item.extra.fileUrl);
          } else {
            uni.showToast({
              title: '请咨询顾问解答',
              icon: 'none'
            });
          }
        }
      }
      // 顾问服务面试辅导报告
      // 这里暂时先注释掉 否则跟上面ztBurryPoint重复会导致重复跳转
      if (item.rightId == 22) {
        if (item.rightStatus != 4) {
          if (item.extra && item.extra.fileUrl) {
            this.openReport(item.extra.fileUrl);
          } else {
            uni.showToast({
              title: '请咨询顾问解答',
              icon: 'none'
            });
          }
        }
      }
      // 职业测评
      if (item.rightId == 2) {
        if (item.rightStatus == 4) {
          uni.navigateTo({
            url: `/pagesSub/careerNew/zhituPaytoC/index?rightId=2&cardType=${this.info.cardType}`
          });
        } else {
          if (item.rightStatus == 1) {
            uni.navigateTo({
              url: `/pagesSub/career/activity/vocationalAssessment?personId=${this.personId}`
            });
          } else {
            uni.navigateTo({
              url: `/pagesSub/careerAssessResultActNew/index?personId=${this.personId}`
            });
          }
        }
      }
      // 输出求职分析报告
      if (item.rightId == 23) {
        if (item.rightStatus == 4) {
          switch (this.projectName) {
            // 判断是哪个项目
            case 'CONSULTE_SERVICE':
              uni.navigateTo({
                url: `/pagesSub/userCenter/careerPathV2/components/BuyPage`
              });
              break;
            case 'ZHITU_WUHAN_SERVICE':
              uni.navigateTo({
                url: `/pagesSub/userCenter/careerPathV2/components/WuHanBuyPage`
              });
              break;
            case 'ZHITU_TOC_SERVICE':
              uni.navigateTo({
                url: `/pagesSub/userCenter/careerPathV2/components/CBuyPage`
              });
              break;
            default:
              break;
          }
        } else {
          if (item.extra && item.extra.fileUrl) {
            this.openReport(item.extra.fileUrl);
          } else {
            uni.showToast({
              title: '请咨询顾问解答',
              icon: 'none'
            });
          }
        }
      }
    },
    getBtnName(item) {
      const { rightId, rightStatus } = item;
      if (rightStatus == 2 || rightStatus == 3) {
        return '完成';
      } else if (rightStatus == 4) {
        switch (+rightId) {
          case 2:
            return '去购买';
          case 3:
            return '立即完善';
          case 4:
            return '立即诊断';
          case 15:
            // return "未解答";
            return '去购买';
          case 17:
            if (this.projectName == 'ZHITU_TOC_SERVICE') {
              return '去使用';
            }
            return '去购买';
          case 22:
            return '去购买';
          case 23:
            return '去购买';
          default:
            return '立即诊断';
        }
      } else if (rightStatus == 1) {
        switch (+rightId) {
          case 2:
            return '去完成';
          case 3:
            return '立即完善';
          case 4:
            return '立即诊断';
          case 15:
            return '未解答';
          case 17:
            return '去完成';
          case 22:
            return '未解答';
          case 23:
            return '未解答';
          default:
            return '立即完成';
        }
      }
    },
    //打开职业报告
    openReport(fileUrl) {
      if (!fileUrl) {
        uni.showToast({ icon: 'none', title: '打开职业报告出错！' });
        return;
      }
      uni.showLoading({
        title: '打开中'
      });

      uni.downloadFile({
        url: fileUrl, // 文件的本身url
        filePath: wx.env.USER_DATA_PATH + '/顾问服务简历解析报告' + '.pdf', // 本地自定义的文件名
        success: function (res) {
          let filePath = res.filePath;
          uni.openDocument({
            filePath: filePath,
            success: function () {
              uni.hideLoading();
            },
            fail: function () {
              uni.hideLoading();
            }
          });
          uni.hideLoading();
        },
        fail: function (res) {
          uni.hideLoading();
          uni.showToast({
            icon: 'none',
            title: '链接已经过期！',
            duration: 1000
          });
        },
        complete: (res) => {
          console.log('complete', res);
        }
      });
    }
  },
  created() {
    // console.log("stepData", this.stepData);
  }
};
</script>

<style lang="scss" scoped>
.step-wrap {
  margin-top: 30rpx;
}

.step-item {
  width: 100%;
  position: relative;
  display: flex;
  box-sizing: border-box;
}

.left {
  display: flex;
  flex-direction: column;

  .up-line {
    height: 35rpx;
    margin-left: 5rpx;
    width: 2rpx;
    background-color: transparent;
  }

  .circle {
    width: 12rpx;
    height: 12rpx;
    text-align: center;
    border-radius: 50%;
    color: #fff;
    background: #d8d8d8;
  }

  .down-line {
    width: 2rpx;
    flex: 1;
    margin-left: 5rpx;
    background-color: #e3e2e2;
  }

  .futureLine {
    background: #e3e2e2;
  }

  .hasDoneLine {
    background: #ffcbbb;
  }

  .hasDoneBg {
    background: #ffcbbb;
  }

  .goingTodoBg {
    background: #ff7045;
  }

  .futureTodoBg {
    background: #d8d8d8;
  }
}

.right {
  flex: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 22rpx 0 24rpx 0;
  margin-left: 28rpx;
  border-bottom: 2rpx solid #f7e0d9;

  .content {
    .free-logo {
      width: 68rpx;
      height: 40rpx;
      background: #e2f4df;
      border-radius: 4rpx;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 22rpx;
      color: #188f3b;
      margin-left: 12rpx;
    }

    .green-right {
      margin-left: 12rpx;
      display: inline-flex;
      width: 32rpx;
      height: 32rpx;
      background-size: 100% 100%;
      background-image: url($img-base + 'careerPath/greenRight.png');
    }

    .title {
      font-weight: 500;
      font-size: 28rpx;
      font-family: PingFangSC, PingFang SC;
      color: #e7a586;
      display: flex;
      flex-direction: row;
      align-items: center;
    }

    .detail {
      padding: 20rpx 0 0 0;
      font-size: 22rpx;
      display: flex;

      .text {
        font-size: 26rpx;
        color: #e7a586;
      }

      .img-list {
        display: flex;
        align-items: center;
        margin-left: 10rpx;

        .avatar {
          width: 40rpx;
          height: 40rpx;
          border-radius: 50%;

          &:not(:first-child) {
            margin-left: -12rpx;
          }
        }
      }
    }

    .hasDone {
      color: #e7a586;
    }

    .goingTodo {
      color: #ff7045;
    }

    .futureTodo {
      color: #999999;
    }
  }

  .finish-text {
    display: flex;
    align-items: center;

    .text {
      color: #e7a586;
      font-size: 26rpx;
    }

    .go {
      width: 20rpx;
      height: 20rpx;
      padding: 3rpx 0 0 12rpx;
    }
  }

  .begin-btn {
    height: 56rpx;
    flex-shrink: 0;
    background: #ff711e;
    border-radius: 32rpx;
    display: flex;
    padding: 12rpx 24rpx;
    align-items: center;
    justify-content: space-between;

    .text {
      font-size: 24rpx;
      font-family: PingFang-SC, PingFang-SC;
      font-weight: bold;
      color: #ffffff;
    }

    .white-arrow {
      width: 20rpx;
      height: 20rpx;
      margin-left: 4rpx;
      padding-top: 6rpx;
    }
  }
}

.step-label {
  margin-top: 10rpx;
}
</style>
